<template>
  <n-space vertical size="large">
    <n-layout v-if="route.meta.layout">
      <n-layout-header class="layout-header">
        <n-grid x-gap="24">
          <n-gi span="6" class="flex">
            <logo></logo>
          </n-gi>
          <n-gi span="12">
            <headerMenu></headerMenu>
          </n-gi>
          <n-gi span="6" class="flex flex-row-reverse">
            <user></user>
            <theme></theme>
            <language></language>
          </n-gi>
        </n-grid>
      </n-layout-header>
      <n-layout-content class="layout-content">
        <router-view />
      </n-layout-content>
    </n-layout>
    <n-layout v-else>
      <n-layout-content>
        <router-view />
      </n-layout-content>
    </n-layout>

    <!-- <n-layout has-sider>
      <n-layout-sider content-style="padding: 24px;">
        海淀桥
      </n-layout-sider>
      <n-layout>
        <n-layout-header>颐和园路</n-layout-header>
        <n-layout-content content-style="padding: 24px;">
          平山道
        </n-layout-content>
        <n-layout-footer>成府路</n-layout-footer>
      </n-layout>
    </n-layout> -->
  </n-space>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import headerMenu from "./components/headerMenu.vue";
import logo from "./components/logo.vue";
import user from "./components/user.vue";
import language from "./components/language.vue";
import theme from "./components/theme.vue";

const route = useRoute();
</script>

<style lang="scss" scoped>
.layout-header {
  display: flex;
  height: 80px;
  align-items: center;
}
.layout-content {
  height: calc(100vh - 80px);
}
</style>
